<template>
  <div>
    <Banner />
    <CommodityDisplay />
    <SidebarNavigation />
    <Footer />
  </div>
</template>

<script>
import Banner from "@/views/home/Banner.vue"; //海报
import SidebarNavigation from "@/views/home/SidebarNavigation.vue"; //侧边栏
import CommodityDisplay from "@/views/home/CommodityDisplay.vue"; // 展示区
import Footer from "@/components/app.footer.vue"; //尾部
export default {
  data() {
    return {};
  },
  components: {
    Banner: Banner,
    SidebarNavigation: SidebarNavigation,
    CommodityDisplay: CommodityDisplay,
    Footer: Footer,
  },
};
</script>
<style  >
/* scoped */
#app {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
i,
em,
b,
strong {
  font-weight: 400;
  font-style: normal;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
/* 共同宽度 */
.gtwidth {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
/* input */
input,
select,
textarea {
  outline: none;
  /* 取消外轮廓线 */
}
textarea {
  resize: none;
  /* 取消拖拽效果 */
}
img {
  vertical-align: top;
  /* 取消图片上下间距 */
  border: 0;
  /* 取消ie6图片产生边框的问题     兼容问题 */
}
.clearfix:after {
  display: table;
  content: "";
  clear: both;
}

/* 清除浮动 */
.clearfix:after,
clearfix:before {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.commonwidth {
  /* 版心 */
  /* width: 1200px !important;
  margin-left: auto;
  margin-right: auto; */
}
</style>
